<script setup lang="ts">
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import Btn2imgUpload from "@/components/common/btn2imgUpload.vue";
import {
  sendPostApi,
  type PostApi
} from "@/api/path/post";
const emit = defineEmits([
  'updateList'
])

const postText = ref('');


// 图片key表
const imageKeyList = ref([])

const handleimageKey = (value) => {
  imageKeyList.value.push(value)
}

// 提交发布(待测试)
const submitPost = () => {
  if (!postText.value.trim()) {
    ElMessage.warning('发布内容不能为空！');
    return;
  }
  const param : PostApi = {
        content: postText.value,
        imageKey: imageKeyList.value,
        isShared: false,
        shareId:'',
  }
  sendPostApi(param).then(res => {
    ElMessage.success("sendpostres:")
    if (res.success) {
      emit('updateList', true);
      showImgUploader.value = false;
      ElMessage.success(res.msg)
    }
    else {
      ElMessage.error(res.msg);
    }
  })
  postText.value = '';
}

// 处理shift+Enter（完成）
const handleShiftEnter = (event: KeyboardEvent) => {
  if (event.shiftKey) {
    event.preventDefault();
    postText.value += '\n'; // 插入换行符
  }
};

// 处理ENTER（完成）
const handleEnter = () => {
  if (!postText.value.trim()) {
    return;
  }
  submitPost();
};
const showImgUploader = ref(false);

// 上传图片
const uploadPic = () => {
  showImgUploader.value = !showImgUploader.value;
}

// 删除所有文本(完成)
const deleteAllText = () => {
  postText.value = ''; // 清空文本区域
  ElMessage.success('文本已删除');
}

</script>

<template>
  <div class="post-status">
    <div class="post-header">
    </div>
    <textarea
      v-model="postText"
      placeholder="分享你的想法..."
      class="post-textarea"
      :rows="2"
      @keydown.prevent.shift.enter="handleShiftEnter"
      @keyup.enter="handleEnter"
    />
    <div v-if="showImgUploader"><Btn2imgUpload @sent-key="handleimageKey"/></div>
    <div class="post-actions">
      <el-icon @click="deleteAllText" :size="20"><Delete /></el-icon>   
      <el-icon @click="uploadPic" :size="20"><Picture /></el-icon><!--或调用imgUploader-->
      <!--
      <el-icon @click="clockSend" :size="20"><Clock /></el-icon>
      <el-icon @click="clockSend" :size="20">@  </el-icon>
      -->
      <button @click="submitPost" class="submit-post">发布</button>
    </div>
  </div>
</template>

<style scoped>
.post-status {
  position: relative;
  width: 100%;
  max-width: 700px;
  padding: 20px;
  background-color: white;
  border-radius: 15px;
  border: 2px solid var(--color-plain);
}

.post-header {
  display: flex;
  align-items: center; 
}

.post-username {
  margin-left: 10px;
}
.post-textarea {
  width: 100%;
  margin-bottom: 10px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: none;
  min-height: 50px;
  font-family: 'Helvetica Neue';
}

.post-actions {
  display: flex;          
  justify-content: space-between; 
  align-items: center;
  margin-left: 10px;
}

.post-actions .el-icon {
  cursor: pointer;
  margin-right: 10px; 
}

.submit-post {
  padding: 8px 16px;
  background-color: #1A91DA;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-left: auto; 
}

.submit-post:hover {
  background-color: #178ab3;
}
.show-pic {
  max-width: 100px;
  max-height: 100px;
}
</style>